<template>
    <div class="options">
        <div class="header">
            <div class="header_center">
                <div>租车市场</div>
                <div @click="toIndex()">网站首页</div>
                <div style="color: #ccc;">我要租车</div>
                <div @click="toUserCenter()">我要还车</div>
            </div>
        </div>

        <div class="main">
            <aside>
                <!-- 品牌选择 -->
                <div class="item" style="background: dodgerblue;color: white;
                 padding: 15px 0;">
                    <el-icon style="font-size: 30px;margin-left: 20px;"><Notification /></el-icon>
                    <div style="text-indent: 10px;margin-top: 2px;">品牌选择</div>
                    <el-icon style="font-size: 20px;margin-left: 5px;transform:rotateZ(-100deg)"><Position /></el-icon>
                </div>
                <!-- 每个品牌 -->
                <div class="item"  v-for="item in brandList" :key="item" @click="searchCar(item.id)">
                    <div style="text-indent: 20px;"><img :src="item.img" class="carLogo" alt=""></div>
                    <div style="margin: 5px;">{{ item.name }}</div>
                </div>
                <!-- 选择的三角形 -->
                <div id="hoverBox"></div>
            </aside>
            <section>
                <div class="title" style="margin-top: 10px;">筛选结果 ..</div>
                <div class="carBox">
                    <div class="car" v-for="item in carList" :key="item">
                        <div class="carImg">
                            <img :src="item.startImage" alt="">
                        </div>
                        <div class="carMess">
                            <div class="carName">{{ item.name }}</div>
                            <div class="carPrice">{{item.price}}元/天</div>
                            <div class="carLocation">{{ item.from }}</div>
                            <el-button type="primary" style="letter-spacing: 1px;margin-top: 10px;" icon="search"
                            @click="toDetailMess(item)">查看详情</el-button>
                        </div>
                    </div>
                </div>
            </section>
        </div>

    </div>
    <messageComp ref="ref_messageComp"></messageComp>
</template>

<script setup>
// 依赖文件
import messageComp from "../components/messageComp.vue";
import { ref } from 'vue'
import axios from 'axios';
import { useRouter } from 'vue-router';
const router = useRouter()
import { useStore } from 'vuex'
const store = useStore()
const ref_messageComp = ref(null) //弹窗message组件refs

// 数据
let brandList = ref([])
let carList = ref([])
// 函数
const toUserCenter = ()=>{
        router.push({
            path:'/userCenter',
        })
   }

const toIndex = ()=>{
    router.back()
}
const toDetailMess = (item)=>{
    ref_messageComp.value.loading({dom:'.options',text:'数据载入中..',color:'rgba(0, 0, 0, 0.1)'},500,()=>{
            router.push({
            path:'/detailMess',
            query:item,
        })
    })
}
const getLogoData = ()=>{
    axios({
        url:store.state.url + '/brands'
    }).then(res=>{
        if (res.data.code == 200) {
            let arr = res.data.data
            brandList.value = arr
            
        }
    }).catch(err=>{
        ref_messageComp.value.messageNetFail('网络连接失败，请检查服务器')
    })
}
const getCarData = ()=>{
    axios({
           url:store.state.url + '/cars'
    }).then(res=>{
        if (res.data.code == 200) {
            let arr = res.data.data
            carList.value = [] //清空数组内容
            ref_messageComp.value.loading({dom:'section',text:'数据拉取中..'},200,()=>{
                // tableData.value = arr
                carList.value = arr
                console.log(arr);
            })
            
        }
    }).catch(err=>{
        ref_messageComp.value.messageNetFail('网络连接失败，请检查服务器')
    })
}
const searchCar = (brandId)=>{
    axios({
        method:'post',
        url:store.state.url + '/cars',
        data:{
            brandId
        }
    }).then(res=>{
        if (res.data.code == 200) {
            let arr = res.data.data
            carList.value = [] //清空数组内容
            ref_messageComp.value.loading({dom:'section',text:'努力搜索数据中....',color:'rgba(0, 0, 0, 0.1)'},1000,()=>{
                // tableData.value = arr
                carList.value = arr
                console.log(arr);
            })
            
        }
    }).catch(err=>{
        ref_messageComp.value.messageNetFail('网络连接失败，请检查服务器')
    })
}
getLogoData()
getCarData()
</script>

<style scoped>
root{
    --init:(105px);
    --n:(90px);
}
.options{
    width: 100%;
    height: 100vh;
}
.header{
    width: 100%;
    height: 110px;
    display: flex;
    flex-wrap: wrap;
    cursor: pointer;
    /* border: 2px solid ; */
}
.header>.header_center{
    width: 100%;
    height: 80px;
    /* border: 2px solid ; */
    display: flex;
}
.header_center>div{
    width: 150px;
    height: 100%;
    line-height: 80px;
    font-size: 18px;
    border-radius: 40px;
}
.header_center>div:nth-child(n+2):hover{
    transition: all 1s;
    color: #ccc;
}
.header_center>div:nth-child(1){
    width: 37%;
    font-size: 30px;
    color: gray;
    text-align: center;
}
.main{
    margin-left: 10%;
    width: 90%;
    height: auto;
    padding: 20px 0;
    display: flex;
}
aside{
    width: 240px;
    height: 50vh;
    position: relative;
    /* box-shadow: 0 0 2px #ccc; */
    /* background-color: #f1eded; */
}

aside>.item{
    margin-top: 10px;
    width:100%;
    padding: 20px 0;
    background-color: #f8f5f55e;
    display: flex;
    border-radius: 10px;
    transition: all .5s;
    /* border-bottom: 0px solid ; */
    letter-spacing: 1px;
    cursor: pointer;
}
.item:hover{
    /* background-color: rgb(200, 227, 236); */
    box-shadow: -4px 2px 4px lightblue;
    /* color: gray; */
    position: relative;
    color: dodgerblue;
}
#hoverBox{
    position: absolute;
    top: 34px;
    border-style: solid;
    border-color: transparent;
    border-width: 10px 10px 10px 10px;
    border-left-color: dodgerblue;
    transition: all .5s;
}
.item:nth-child(2):hover ~ #hoverBox{
    top: 110px;
}
.item:nth-child(3):hover ~ #hoverBox{
    top: 190px;
}
.item:nth-child(4):hover ~ #hoverBox{
    top: 280px;
}
.item:nth-child(5):hover ~ #hoverBox{
    top: 360px;
}
.item:nth-child(6):hover ~ #hoverBox{
    top: 450px;
}
.item:nth-child(7):hover ~ #hoverBox{
    top: 530px;
}
.item:nth-child(8):hover ~ #hoverBox{
    top: 600px;
}
/* .item:nth-child(3):hover ~ #hoverBox{
    top: 104px;
}
.item:nth-child(4):hover ~ #hoverBox{
    top: 152px;
} */
.carLogo{
    width: 30px;
    height: 30px;
}

section{
    margin-left: 10px;
    width: calc(100% - 220px);
    height: auto;
    min-height: 80vh;
    background-color: #f5f8f852;
    border-radius: 5px;
    box-shadow: 0 0 1px skyblue;
}
.title {
  margin-top: 10px;
  font-size: 20px;
}

.carBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}

.car {
  width: 280px;
  margin: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.carImg {
  text-align: center;
}


.carImg img {
  max-width: 100%;
  height: auto;
  max-height: 200px; /* 调整图片显示高度 */
  transition: .6s;
}
.carImg>img:hover{
    transform: scale(1.2);
    border-radius: 10px;
}
.carMess {
  padding-top: 10px;
  text-align: center;
  font-size: 13px; /* 调整文字大小 */
}

.carName {
  font-weight: bold;
}

.carPrice {
  color: #007bff;
  font-size: 13px; /* 调整文字大小 */
}

.carLocation {
  color: #6c757d;
  font-size: 13px; /* 调整文字大小 */
}


</style>